Closed Bug 1606785 (prettier-css-format) Opened 5 years ago Closed 4 days ago

Use Prettier for formatting CSS files

Categories

(Developer Infrastructure :: Lint and Formatting, task, P3)

Product:
Developer Infrastructure
Component:
Lint and Formatting
Type:
task

Tracking

(firefox141 fixed)

Status:
RESOLVED FIXED
Milestone:
141 Branch
Tracking Flags:
Tracking Status
firefox141 --- fixed

People

(Reporter: Honza, Assigned: hjones)

References

(Blocks 2 open bugs)

Details

(Whiteboard: [recomp])

Attachments

(19 files, 2 obsolete files)

content browser.css formatted by prettier
45.13 KB, text/css
Details
Diff of content browser.css before/after prettier usage
44.60 KB, patch
Details | Diff | Splinter Review
Bug 1606785 - Enable Prettier for CSS files r=#desktop-theme-reviewers,Standard8,#frontend-codestyle-reviewers,emilio
48 bytes, text/x-phabricator-request
Details | Review
Bug 1606785 - Format aboutlogins, megalist, and form autofill CSS files with Prettier r=#credential-management-reviewers,mtigley,#desktop-theme-reviewers,dao
48 bytes, text/x-phabricator-request
Details | Review
Bug 1606785 - Format firefoxview CSS files with Prettier r=#fxview-reviewers,#desktop-theme-reviewers,dao,jsudiaman
48 bytes, text/x-phabricator-request
Details | Review
Bug 1606785 - Format genai and ml CSS files with Prettier r=#firefox-ai-ml-reviewers,Mardak
48 bytes, text/x-phabricator-request
Details | Review
Bug 1606785 - Format profiles CSS files with Prettier r=#profiles-reviewers,#desktop-theme-reviewers,dao,mossop
48 bytes, text/x-phabricator-request
Details | Review
Bug 1606785 - Format sidebar CSS files with Prettier r=#sidebar-reviewers,#desktop-theme-reviewers,dao,nsharpley
48 bytes, text/x-phabricator-request
Details | Review
Bug 1606785 - Format recomp CSS files with Prettier r=#reusable-components-reviewers,#desktop-theme-reviewers,dao,mkennedy
48 bytes, text/x-phabricator-request
Details | Review
Bug 1606785 - Format devtools CSS files with Prettier r=#devtools-reviewers,nchevobbe,#frontend-codestyle-reviewers
48 bytes, text/x-phabricator-request
Details | Review
Bug 1606785 - Format layout CSS files with Prettier r=#layout-reviewers,dholbert
48 bytes, text/x-phabricator-request
Details | Review
Bug 1606785 - Format android CSS files with Prettier r=#geckoview-reviewers,hiro
48 bytes, text/x-phabricator-request
Details | Review
Bug 1606785 - Format dom CSS files with Prettier r=emilio
48 bytes, text/x-phabricator-request
Details | Review
Bug 1606785 - Format search CSS files with Prettier r=#search-reviewers,jteow
48 bytes, text/x-phabricator-request
Details | Review
Bug 1606785 - Format webcompat CSS files with Prettier r=#webcompat-reviewers,denschub
48 bytes, text/x-phabricator-request
Details | Review
Bug 1606785 - Format urlbar CSS files with Prettier r=#urlbar-reviewers,#desktop-theme-reviewers,dao
48 bytes, text/x-phabricator-request
Details | Review
Bug 1606785 - Format browser/themes and toolkit/themes CSS files with Prettier r=#desktop-theme-reviewers,#pip-reviewers,#tabbrowser-reviewers,#places-reviewers,dao,mconley
48 bytes, text/x-phabricator-request
Details | Review
Bug 1606785 - Format Firefox CSS files with Prettier r=#desktop-theme-reviewers,#perftest-reviewers,#places-reviewers,#translations-reviewers,#omc-reviewers,#backup-reviewers,#browser-installer-reviewers,sparky,dao,pdahiya,nrishel,kpatenio
48 bytes, text/x-phabricator-request
Details | Review
Bug 1606785 - Format browser/themes/preferences CSS files with Prettier r=#settings-reviewers,#desktop-theme-reviewers,dao,mconley
48 bytes, text/x-phabricator-request
Details | Review

It would be great to have unified style formatting for all DevTools CSS files.

  • Consistency across our code base
  • Easier reviews
  • IDE integrations (e.g. VS Code docs)
  • Automation through ./mach eslint

WDYT?

Honza

What about doing it on the whole tree?

Component: General → Lint and Formatting
Product: DevTools → Firefox Build System

Victor, I believe we talked about this when we discussed prettier. What do you think about linting CSS in devtools or all of tree?

Flags: needinfo?(vporof)
See Also: → 1508369
See Also: → 1561001

Clearing stale needinfo.

If we decide to move forward, we should dupe bug 1508369 to this.

Flags: needinfo?(vporof)

It is being discussed (on the roadmap or not)

See Also: → 1659444
See Also: 1561001 →
Blocks: css-linting
No longer blocks: prettier-format
Severity: normal → --
See Also: 1508369, 1659444 → prettier-format
Summary: Run prettier for CSS files → Run prettier coding style for CSS files
Summary: Run prettier coding style for CSS files → Use Prettier for formatting CSS files
Alias: prettier-css-format
Product: Firefox Build System → Developer Infrastructure

We are not planning to move forward with this at the moment. There's some summarized context in bug 1921088 comment 2.

Instead we probably want to use the stylistic-stylelint rules rolled out more widely than the new tab code, which gives us some of the same benefits described here.

Status: NEW → RESOLVED
Closed: 8 months ago
Resolution: --- → WONTFIX
Assignee: nobody → hjones
Attachment #9485813 - Attachment description: WIP: Bug 1606785 - Format firefox CSS files → WIP: Bug 1606785 - Format Firefox CSS files using Prettier

A patch has been attached on this bug, which was already closed. Filing a separate bug will ensure better tracking. If this was not by mistake and further action is needed, please alert the appropriate party. (Or: if the patch doesn't change behavior -- e.g. landing a test case, or fixing a typo -- then feel free to disregard this message)

I spent some time investigating different options for formatting out CSS files and reached the conclusion that we would be better off going with Prettier over stylistic-stylelint. I wrote a doc (internal access only) covering what I did/my conclusions, but just to summarize briefly Prettier:

  • integrates better with our ./mach tooling
  • integrates with IDEs and code editors in a way that provides a better developer experience
  • should allow us to fix most formatting/stylistic errors before code gets pushed up for review
  • is already familiar to most developers and has robust community support

Additionally some of the most objectionable changes Prettier was trying to make to our CSS files are avoidable by configuring printWidth to not break lines so aggressively. Reopening this bug as I've already started the work to enable Prettier for our CSS files.

Status: RESOLVED → REOPENED
Resolution: WONTFIX → ---
Attachment #9485812 - Attachment description: WIP: Bug 1606785 - Enable Prettier for CSS files → Bug 1606785 - Enable Prettier for CSS files r=#frontend-codestyle-reviewers,#desktop-theme-reviewers
Attachment #9485813 - Attachment is obsolete: true
Attachment #9487445 - Attachment description: Bug 1606785 - Format aboutlogins and megalist CSS files with Prettier r=#credential-management-reviewers → Bug 1606785 - Format aboutlogins, megalist, and form autofill CSS files with Prettier r=#credential-management-reviewers
Whiteboard: [recomp]
Pushed by hjones@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/88eb2d77738d Format aboutlogins, megalist, and form autofill CSS files with Prettier r=credential-management-reviewers,mtigley,desktop-theme-reviewers,dao https://hg.mozilla.org/integration/autoland/rev/23b8b4a15129 Format firefoxview CSS files with Prettier r=fxview-reviewers,desktop-theme-reviewers,dao,jsudiaman https://hg.mozilla.org/integration/autoland/rev/a7bad4d85a89 Format genai and ml CSS files with Prettier r=firefox-ai-ml-reviewers,Mardak https://hg.mozilla.org/integration/autoland/rev/72a6ba395571 Format profiles CSS files with Prettier r=profiles-reviewers,desktop-theme-reviewers,dao,mossop https://hg.mozilla.org/integration/autoland/rev/f44ccd5a720f Format shopping CSS files with Prettier r=shopping-reviewers,desktop-theme-reviewers,dao,rking https://hg.mozilla.org/integration/autoland/rev/060fbf636fc5 Format sidebar CSS files with Prettier r=sidebar-reviewers,desktop-theme-reviewers,dao,nsharpley https://hg.mozilla.org/integration/autoland/rev/e159a4e14f78 Format recomp CSS files with Prettier r=reusable-components-reviewers,desktop-theme-reviewers,dao,mkennedy https://hg.mozilla.org/integration/autoland/rev/61d523206fe5 Format devtools CSS files with Prettier r=devtools-reviewers,nchevobbe,frontend-codestyle-reviewers https://hg.mozilla.org/integration/autoland/rev/fa855659bb41 Format layout CSS files with Prettier r=layout-reviewers,dholbert https://hg.mozilla.org/integration/autoland/rev/d73e071cbcb4 Format android CSS files with Prettier r=geckoview-reviewers,hiro https://hg.mozilla.org/integration/autoland/rev/739b2db7da97 Format dom CSS files with Prettier r=emilio https://hg.mozilla.org/integration/autoland/rev/f585fc0e8692 Format search CSS files with Prettier r=search-reviewers,jteow https://hg.mozilla.org/integration/autoland/rev/f7e68782eee8 Format webcompat CSS files with Prettier r=webcompat-reviewers,denschub https://hg.mozilla.org/integration/autoland/rev/af93b4da60bf Format urlbar CSS files with Prettier r=urlbar-reviewers,desktop-theme-reviewers,dao https://hg.mozilla.org/integration/autoland/rev/85bc8f178bd7 Format browser/themes/preferences CSS files with Prettier r=settings-reviewers,desktop-theme-reviewers,dao,mconley https://hg.mozilla.org/integration/autoland/rev/73dc5c4fc8d5 Format browser/themes and toolkit/themes CSS files with Prettier r=desktop-theme-reviewers,pip-reviewers,tabbrowser-reviewers,places-reviewers,dao,mconley https://hg.mozilla.org/integration/autoland/rev/e84a5f22940f Format Firefox CSS files with Prettier r=desktop-theme-reviewers,perftest-reviewers,places-reviewers,translations-reviewers,omc-reviewers,backup-reviewers,browser-installer-reviewers,sparky,dao,pdahiya,nrishel,kpatenio https://hg.mozilla.org/integration/autoland/rev/cc9827cb71e9 Enable Prettier for CSS files r=desktop-theme-reviewers,Standard8,frontend-codestyle-reviewers,emilio
Regressions: 1967641
Pushed by agoloman@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/bfb13a2be9d5 Revert "Bug 1606785 - Enable Prettier for CSS files r=desktop-theme-reviewers,Standard8,frontend-codestyle-reviewers,emilio" for causing multiple failures.

Backed out for causing multiple failures.

Flags: needinfo?(hjones)
Keywords: leave-open
Attachment #9487449 - Attachment is obsolete: true
Attachment #9487445 - Attachment description: Bug 1606785 - Format aboutlogins, megalist, and form autofill CSS files with Prettier r=#credential-management-reviewers → Bug 1606785 - Format aboutlogins, megalist, and form autofill CSS files with Prettier r=#credential-management-reviewers,mtigley,#desktop-theme-reviewers,dao
Attachment #9487446 - Attachment description: Bug 1606785 - Format firefoxview CSS files with Prettier r=#fxview-reviewers → Bug 1606785 - Format firefoxview CSS files with Prettier r=#fxview-reviewers,#desktop-theme-reviewers,dao,jsudiaman
Attachment #9487447 - Attachment description: Bug 1606785 - Format genai and ml CSS files with Prettier r=#firefox-ai-ml-reviewers → Bug 1606785 - Format genai and ml CSS files with Prettier r=#firefox-ai-ml-reviewers,Mardak
Attachment #9487448 - Attachment description: Bug 1606785 - Format profiles CSS files with Prettier r=#profiles-reviewers → Bug 1606785 - Format profiles CSS files with Prettier r=#profiles-reviewers,#desktop-theme-reviewers,dao,mossop
Attachment #9487450 - Attachment description: Bug 1606785 - Format sidebar CSS files with Prettier r=#sidebar-reviewers → Bug 1606785 - Format sidebar CSS files with Prettier r=#sidebar-reviewers,#desktop-theme-reviewers,dao,nsharpley
Attachment #9487451 - Attachment description: Bug 1606785 - Format recomp CSS files with Prettier r=#recomp-reviewers → Bug 1606785 - Format recomp CSS files with Prettier r=#reusable-components-reviewers,#desktop-theme-reviewers,dao,mkennedy
Attachment #9487452 - Attachment description: Bug 1606785 - Format devtools CSS files with Prettier r=#devtools-reviewers → Bug 1606785 - Format devtools CSS files with Prettier r=#devtools-reviewers,nchevobbe,#frontend-codestyle-reviewers
Attachment #9487453 - Attachment description: Bug 1606785 - Format layout CSS files with Prettier r=#layout-reviewers → Bug 1606785 - Format layout CSS files with Prettier r=#layout-reviewers,dholbert
Attachment #9487455 - Attachment description: Bug 1606785 - Format android CSS files with Prettier r=#android-reviewers → Bug 1606785 - Format android CSS files with Prettier r=#geckoview-reviewers,hiro
Attachment #9487456 - Attachment description: Bug 1606785 - Format dom CSS files with Prettier r=#dom-core → Bug 1606785 - Format dom CSS files with Prettier r=emilio
Attachment #9487457 - Attachment description: Bug 1606785 - Format search CSS files with Prettier r=#search-reviewers → Bug 1606785 - Format search CSS files with Prettier r=#search-reviewers,jteow
Attachment #9487458 - Attachment description: Bug 1606785 - Format webcompat CSS files with Prettier r=#webcompat-reviewers → Bug 1606785 - Format webcompat CSS files with Prettier r=#webcompat-reviewers,denschub
Attachment #9487459 - Attachment description: Bug 1606785 - Format urlbar CSS files with Prettier r=#urlbar-reviewers → Bug 1606785 - Format urlbar CSS files with Prettier r=#urlbar-reviewers,#desktop-theme-reviewers,dao
Attachment #9487467 - Attachment description: Bug 1606785 - Format browser/themes/preferences CSS files with Prettier r=#preferences-reviewers → Bug 1606785 - Format browser/themes/preferences CSS files with Prettier r=#settings-reviewers,#desktop-theme-reviewers,dao,mconley
Attachment #9487460 - Attachment description: Bug 1606785 - Format browser/themes and toolkit/themes CSS files with Prettier r=#desktop-theme-reviewers → Bug 1606785 - Format browser/themes and toolkit/themes CSS files with Prettier r=#desktop-theme-reviewers,#pip-reviewers,#tabbrowser-reviewers,#places-reviewers,dao,mconley
Attachment #9487461 - Attachment description: Bug 1606785 - Format Firefox CSS files with Prettier r=#desktop-theme-reviewers → Bug 1606785 - Format Firefox CSS files with Prettier r=#desktop-theme-reviewers,#perftest-reviewers,#places-reviewers,#translations-reviewers,#omc-reviewers,#backup-reviewers,#browser-installer-reviewers,sparky,dao,pdahiya,nrishel,kpatenio
Attachment #9485812 - Attachment description: Bug 1606785 - Enable Prettier for CSS files r=#frontend-codestyle-reviewers,#desktop-theme-reviewers → Bug 1606785 - Enable Prettier for CSS files r=#desktop-theme-reviewers,Standard8,#frontend-codestyle-reviewers,emilio
Pushed by hjones@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/b10012be5d43 Format aboutlogins, megalist, and form autofill CSS files with Prettier r=credential-management-reviewers,mtigley,desktop-theme-reviewers,dao https://hg.mozilla.org/integration/autoland/rev/85fb16265b32 Format firefoxview CSS files with Prettier r=fxview-reviewers,desktop-theme-reviewers,dao,jsudiaman https://hg.mozilla.org/integration/autoland/rev/9d0eb46721e2 Format genai and ml CSS files with Prettier r=firefox-ai-ml-reviewers,Mardak https://hg.mozilla.org/integration/autoland/rev/86bb0e6d3c36 Format profiles CSS files with Prettier r=profiles-reviewers,desktop-theme-reviewers,dao,mossop https://hg.mozilla.org/integration/autoland/rev/4045a0e95372 Format sidebar CSS files with Prettier r=sidebar-reviewers,desktop-theme-reviewers,dao,nsharpley https://hg.mozilla.org/integration/autoland/rev/4ae3860a63bc Format recomp CSS files with Prettier r=reusable-components-reviewers,desktop-theme-reviewers,dao,mkennedy https://hg.mozilla.org/integration/autoland/rev/fe857c0eaa35 Format devtools CSS files with Prettier r=devtools-reviewers,nchevobbe,frontend-codestyle-reviewers https://hg.mozilla.org/integration/autoland/rev/0f18da6e25ec Format layout CSS files with Prettier r=layout-reviewers,dholbert
Pushed by hjones@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/509b0ce5a617 Format android CSS files with Prettier r=geckoview-reviewers,hiro https://hg.mozilla.org/integration/autoland/rev/f2aac34af2e9 Format dom CSS files with Prettier r=emilio https://hg.mozilla.org/integration/autoland/rev/a05e0c7a4de3 Format search CSS files with Prettier r=search-reviewers,jteow https://hg.mozilla.org/integration/autoland/rev/c6654494b739 Format webcompat CSS files with Prettier r=webcompat-reviewers,denschub,twisniewski https://hg.mozilla.org/integration/autoland/rev/bea2b9e6b9a7 Format urlbar CSS files with Prettier r=urlbar-reviewers,desktop-theme-reviewers,dao https://hg.mozilla.org/integration/autoland/rev/fa19eaf842b6 Format browser/themes/preferences CSS files with Prettier r=settings-reviewers,desktop-theme-reviewers,dao,mconley https://hg.mozilla.org/integration/autoland/rev/cc2a6d98ffb4 Format browser/themes and toolkit/themes CSS files with Prettier r=desktop-theme-reviewers,pip-reviewers,tabbrowser-reviewers,places-reviewers,dao,mconley https://hg.mozilla.org/integration/autoland/rev/01b13f86a4ac Format Firefox CSS files with Prettier r=desktop-theme-reviewers,perftest-reviewers,places-reviewers,translations-reviewers,omc-reviewers,backup-reviewers,browser-installer-reviewers,sparky,dao,pdahiya,nrishel,kpatenio
Pushed by hjones@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/593d12c6549d Enable Prettier for CSS files r=desktop-theme-reviewers,Standard8,frontend-codestyle-reviewers,emilio
See Also: → 1968846
Flags: needinfo?(hjones)
Keywords: leave-open
Status: REOPENED → RESOLVED
Closed: 8 months ago → 4 days ago
status-firefox141: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → 141 Branch
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: